﻿@model iMyRestaurent.Models.MenuModels
@{
    ViewBag.Title = "iMyMenu";
}
@section import {
    @NoCache.Instance.Css(Url, "~/Content/menu.css")
    @NoCache.Instance.Css(Url, "~/Content/i-my-menu-v2.css")
    @NoCache.Instance.Css(Url, "~/Content/buttons.css")
    @NoCache.Instance.Css(Url, "~/Content/biz-hours.css")
    @NoCache.Instance.Css(Url, "~/Content/popup.css")
    @NoCache.Instance.Css(Url, "~/Content/menu-styles/style1/style.css")
    @NoCache.Instance.Css(Url, "~/Content/menu-styles/style2/style.css")
    @NoCache.Instance.Css(Url, "~/Content/menu-styles/style3/style.css")
}
@section script {
    @NoCache.Instance.Javascript(Url, "~/Scripts/accordion-controller.js")
    @NoCache.Instance.Javascript(Url, "~/Scripts/jlinq.js")
    @NoCache.Instance.Javascript(Url, "~/Scripts/jquery.form.js")
    @NoCache.Instance.Javascript(Url, "~/Scripts/preview-manager.js")
    @NoCache.Instance.Javascript(Url, "~/Scripts/menu-editor.js")
}
<div id="menu-editor" class="opacity-box">
    <div class="clearfix">
        <div id="editor-panel">
            <div class="header">
                <div class="title titleleft">
                    <span>Menu editor</span>
                </div>
                <div class="settings">
                    <span>@*<button id="btn-settings" type="button" class="image-button button-setting">
                        </button>*@
                        <img id="btn-settings" src="/Content/images/Settings.png" width="35" height="35">
                    </span>
                </div>
            </div>
            <div class="body">
                <div id="gerenal-data">
                    <div class="clearfix">
                        <div class="dropdown-div">
                            <div>
                                <span>Stylesheets</span>
                            </div>
                            <div>
                                @Html.DropDownList("dropcssid", Model.styleSheets, new { id = "drop-cssid" })
                            </div>
                        </div>
                        <div class="dropdown-div">
                            <div>
                                <span>Currency</span>
                            </div>
                            <div>
                                @Html.DropDownList("dropcurrencyid", Model.currencies, new { id = "drop-currencyid" })
                            </div>
                        </div>
                        <div class="dropdown-div">
                            <div>
                                <span>Language</span>
                            </div>
                            <div>
                                <select id="drop-language">
                                    @foreach (var item in Model.languages)
                                    {
                                        <option @*@(item.Name == "English" ? "selected=selected" : "")*@ shortname="@item.ShortName" value="@item.LangID">@item.Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div id="language-data" class="clearfix">
                            <div id="lang-div">
                                <div title="Your primary language should be used to complete your menu.">
                                    <input type="radio" name="radLang" id="rad-primary" value="Primary" />Primary
                                </div>
                                <div>
                                    <input type="radio" name="radLang" id="rad-secondary" value="Secondary" />Secondary
                                </div>
                            </div>
                            <div id="auto-trans-div" class="clearfix">
                                <input type="checkbox" id="auto-trans" value="true" />
                                <span title="The menu will be translated from primary language to other languages when you click &ldquo;Save&rdquo;.">
                                    Automatic translation</span>
                            </div>
                        </div>
                    </div>
                    <div id="summary-selection" class="clearfix">
                        <div class="col">
                            <div class="clearfix">
                                <div class="label">
                                    <span>Menu</span>
                                </div>
                                <div class="value">
                                    <span id="selected-menu-name"></span>
                                </div>
                            </div>
                            <div class="clearfix">
                                <div class="label">
                                    <span>Section</span>
                                </div>
                                <div class="value">
                                    <span id="selected-section-name"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="clearfix">
                                <div class="label">
                                    <span>Subsection</span>
                                </div>
                                <div class="value">
                                    <span id="selected-subsection-name"></span>
                                </div>
                            </div>
                            <div class="clearfix">
                                <div class="label">
                                    <span>Item</span>
                                </div>
                                <div class="value">
                                    <span id="selected-item-name"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="clearfix">
                                <div class="label">
                                    <span>Group</span>
                                </div>
                                <div class="value">
                                    <span id="selected-group-name"></span>
                                </div>
                            </div>
                            <div class="clearfix">
                                <div class="label">
                                    <span>Option</span>
                                </div>
                                <div class="value">
                                    <span id="selected-option-name"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- menu-begin -->
                <div class="accordion">
                    <div class="acc-header">
                        <div class="acc-header-content clearfix">
                            <div class="accordion-name">
                                <span>Menu</span>
                            </div>
                            <div class="buttons">
                                <button title="Start a new menu" type="button" id="btn-menu-add" class="image-button add-icon">
                                </button>
                                <button disabled="disable" title="Add this menu to the preview" type="button" id="btn-menu-update"
                                    class="image-button sav-icon">
                                </button>
                                <button disabled="disable" title="Delete the selected menu" type="button" id="btn-menu-del"
                                    class="image-button del-icon">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="acc-body clearfix">
                        <form action="/Menu/AddMenu" method="post" enctype="multipart/form-data" id="menu-form">
                        <input type="hidden" class="flag" id="menu-flag" value="add" />
                        <input type="hidden" name="CSSID" id="txt-menu-cssid" value="" />
                        <input type="hidden" name="CurrencyID" id="txt-menu-currencyid" value="" />
                        <input type="hidden" name="PriLanguageID" id="txt-menu-prilangid" value="" />
                        <input type="hidden" name="SeLanguageID" id="txt-menu-selangid" value="" />
                        <input type="hidden" name="MenuID" id="txt-menu-menuid" value="" />
                        <input type="hidden" name="Contents" id="menu-content" value="" />
                        <input type="hidden" name="IsAutoTrans" id="txt-menu-autotrans" value="" />
                        <input type="hidden" name="ImageID" id="menu-image-imageid" value="" />
                        <input type="hidden" name="IconID" id="menu-icon-imageid" value="" />
                        <div class="col1">
                        </div>
                        <div class="col2">
                            <div class="list">
                                <ul id="drop-menu">
                                    @if (Model.menus != null && Model.menus.Count() > 0)
                                    {
                                        foreach (var item in Model.menus)
                                        { 
                                        <li><a value="@item.MenuID">@(item.Name == "" ? "[Unnamed]" : item.Name)</a></li>
                                        }
                                    }
                                </ul>
                            </div>
                        </div>
                        <div class="col3">
                            <div>
                                <input placeholder="Name" inputblock="menu" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"
                                    name="menuName" id="txt-menu-name" type="text" value="" />
                            </div>
                            <div>
                                <span class="acc-label">Description</span>
                            </div>
                            <div>
                                <textarea id="txt-menu-desc" inputblock="menu" name="menuDesc"></textarea>
                            </div>
                            <div>
                                <span>Primary language: </span><span id="label-pri">English</span>
                            </div>
                            <div>
                                <span>Secondary language: </span><span id="label-se">None</span>
                            </div>
                            <div>
                                <span title="Active menus are displayed on the iMyTable application for customers to view.
To hide a menu from customers on the iMyTable application, deactivate the menu." class="acc-label">Active</span>
                                <input id="menu-active" type="checkbox" name="menuActive" value="true" />
                            </div>
                        </div>
                        <div class="col4">
                            <div class="preview-image">
                                <div class="image-button search-for-image">
                                    <input type="file" name="menuImage" for="menu-preview-image" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-menu-del-img">
                                    </button>
                                    <div class="client-preview-area" id="menu-preview-image">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="menu-image-display" name="MenuDisplayImage" value="true" />
                                </div>
                            </div>
                            <div class="preview-icon" style="display: none;">
                                <div class="image-button search-for-icon">
                                    <input type="file" name="menuIcon" for="menu-preview-icon" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-menu-del-icon">
                                    </button>
                                    <div class="client-preview-area" id="menu-preview-icon">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="menu-icon-display" name="MenuDisplayIcon" value="true" />
                                </div>
                            </div>
                            <div>
                                <select id="menu-select-imageicon">
                                    <option value="image">Image</option>
                                    <option value="icon">Icon</option>
                                </select>
                            </div>
                            <div>
                                <span class="acc-label">Type</span>
                            </div>
                            <div id="menu-type-list">
                                @foreach (var type in Model.MenuTypes)
                                {
                                    <div class="line clearfix">
                                        <div class="checkbox">
                                            <input type="checkbox" value="@type.TypeID" name="TypeID" />
                                        </div>
                                        <div class="menu-type-name">
                                            <span>@type.Name</span>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!-- menu-end -->
                <!-- section-begin -->
                <div class="accordion">
                    <div class="acc-header">
                        <div class="acc-header-content clearfix">
                            <div class="accordion-name">
                                <span>Section</span>
                            </div>
                            <div class="buttons">
                                <button title="Start a new section" type="button" class="image-button add-icon" id="btn-sec-add">
                                </button>
                                <button disabled="disable" title="Add this section to the preview" type="button"
                                    class="image-button sav-icon" id="btn-sec-update">
                                </button>
                                <button disabled="disable" title="Delete the selected section" type="button" class="image-button del-icon"
                                    id="btn-sec-del">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="acc-body clearfix">
                        <form action="/Menu/AddSection" method="post" enctype="multipart/form-data" id="section-form">
                        <input type="hidden" class="flag" id="sec-flag" value="add" />
                        <input type="hidden" name="LangID" id="sec-lang-id" value="" />
                        <input type="hidden" name="MenuID" id="sec-menu-id" value="" />
                        <input type="hidden" name="SectionID" id="section-id" value="" />
                        <input type="hidden" name="IsAutoTrans" id="txt-sec-autotrans" value="" />
                        <input type="hidden" name="Contents" id="sec-contents" value="" />
                        <input type="hidden" name="PriLanguageID" id="sec-pri-lang-id" />
                        <input type="hidden" name="ImageID" id="sec-imageid" value="" />
                        <div class="col1">
                            <button type="button" class="image-button order-move-up" blocktype="Section" ordertype="up"
                                id="btn-sec-up">
                            </button>
                            <button type="button" class="image-button order-move-down" blocktype="Section" ordertype="down"
                                id="btn-sec-down">
                            </button>
                        </div>
                        <div class="col2">
                            <div class="list">
                                <ul id="drop-sec">
                                </ul>
                            </div>
                        </div>
                        <div class="col3">
                            <div>
                                <input placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"
                                    name="SectionName" inputblock="sec" id="txt-sec-name" type="text" value="" />
                            </div>
                            <div>
                                <span class="acc-label">Description</span>
                            </div>
                            <div>
                                <textarea name="sectionDesc" inputblock="sec" id="txt-sec-desc"></textarea>
                            </div>
                            <div>
                                <span title="Active sections are displayed on the iMyTable application for customers to view.
To hide a section from customers on the iMyTable application, deactivate the section." class="acc-label">Active</span>
                                <input type="checkbox" id="section-active" name="IsActive" value="true" />
                            </div>
                        </div>
                        <div class="col4">
                            <div class="preview-icon">
                                <div class="image-button search-for-icon">
                                    <input type="file" name="Icon" for="section-preview-icon" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-sec-delicon">
                                    </button>
                                    <div id="section-preview-icon" class="client-preview-area">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="section-display-icon" name="DisplayIcon" value="true" />
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!-- section-end -->
                <!-- subsection-begin -->
                <div class="accordion">
                    <div class="acc-header">
                        <div class="acc-header-content clearfix">
                            <div class="accordion-name">
                                <span>Subsection</span>
                            </div>
                            <div class="buttons">
                                <button title="Start a new subsection" type="button" class="image-button add-icon"
                                    id="btn-subsec-add">
                                </button>
                                <button disabled="disable" title="Add this subsection to the preview" type="button"
                                    class="image-button sav-icon" id="btn-subsec-update">
                                </button>
                                <button disabled="disable" title="Delete the selected subsection" type="button" class="image-button del-icon"
                                    id="btn-subsec-del">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="acc-body clearfix">
                        <form action="/Menu/AddSection" method="post" enctype="multipart/form-data" id="subsection-form">
                        <input type="hidden" class="flag" id="subsec-flag" value="add" />
                        <input type="hidden" name="parentID" id="txt-subsec-parentid" value="" />
                        <input type="hidden" name="LangID" id="txt-subsec-langid" value="" />
                        <input type="hidden" name="PriLanguageID" id="subsec-pri-lang-id" />
                        <input type="hidden" name="menuID" id="txt-subsec-menuid" value="" />
                        <input type="hidden" name="SectionID" id="txt-subsec-sectionid" value="" />
                        <input type="hidden" name="IsAutoTrans" id="txt-subsec-autotrans" value="" />
                        <input type="hidden" name="XMLNameDesc" id="txt-subsec-xml" value="" />
                        <input type="hidden" name="Contents" id="subsec-contents" value="" />
                        <input type="hidden" name="ImageID" id="subsec-imageid" value="" />
                        <div class="col1">
                            <button type="button" class="image-button order-move-up" blocktype="SubSection" ordertype="up">
                            </button>
                            <button type="button" class="image-button order-move-down" blocktype="SubSection"
                                ordertype="down">
                            </button>
                        </div>
                        <div class="col2">
                            <div class="list">
                                <ul id="drop-subsec">
                                </ul>
                            </div>
                        </div>
                        <div class="col3">
                            <div>
                                <input placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"
                                    type="text" inputblock="subsec" name="sectionName" id="txt-subsec-name" value="" />
                            </div>
                            <div>
                                <span class="acc-label">Description</span>
                            </div>
                            <div>
                                <textarea id="txt-subsec-desc" inputblock="subsec" name="sectionDesc"></textarea>
                            </div>
                            <div>
                                <span title="Active subsections are displayed on the iMyTable application for customers to view.
To hide a subsection from customers on the iMyTable application, deactivate the subsection." class="acc-label">Active</span>
                                <input type="checkbox" id="subsection-active" name="IsActive" value="true" />
                            </div>
                        </div>
                        <div class="col4">
                            <div class="preview-icon">
                                <div class="image-button search-for-icon">
                                    <input type="file" name="Icon" for="subsection-preview-icon" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-subsec-delicon">
                                    </button>
                                    <div class="client-preview-area" id="subsection-preview-icon">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="subsection-display-icon" name="sectionDisplayIcon" value="true" />
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!-- subsection-end -->
                <!-- item-begin -->
                <div class="accordion">
                    <div class="acc-header">
                        <div class="acc-header-content clearfix">
                            <div class="accordion-name">
                                <span>Menu Item</span>
                            </div>
                            <div class="buttons">
                                <button title="Start a new menu item" type="button" class="image-button add-icon"
                                    id="btn-item-add">
                                </button>
                                <button disabled="disable" title="Add this menu item to the preview" type="button"
                                    class="image-button sav-icon" id="btn-item-update">
                                </button>
                                <button disabled="disable" title="Delete the selected menu item" type="button" class="image-button del-icon"
                                    id="btn-item-del">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="acc-body clearfix">
                        <form action="/Menu/AddItem" method="post" enctype="multipart/form-data" id="item-form">
                        <input type="hidden" class="flag" id="item-flag" value="add" />
                        <input type="hidden" name="LangID" id="txt-item-langid" value="" />
                        <input type="hidden" name="PriLanguageID" id="txt-item-prilangid" value="" />
                        <input type="hidden" name="sectionID" id="txt-item-sectionid" value="" />
                        <input type="hidden" name="ToSubOrSec" id="txt-item-to" value="" />
                        <input type="hidden" name="ItemID" id="txt-item-itemid" value="" />
                        <input type="hidden" name="IsAutoTrans" id="txt-item-autotrans" value="" />
                        <input type="hidden" name="XMLNameDesc" id="txt-item-xml" value="" />
                        <input type="hidden" name="Contents" id="item-contents" value="" />
                        <input type="hidden" name="ImageID" id="item-imageid" value="" />
                        <input type="hidden" name="IconID" id="item-iconid" value="" />
                        <div class="col1">
                            <button type="button" class="image-button order-move-up" blocktype="Item" ordertype="up">
                            </button>
                            <button type="button" class="image-button order-move-down" blocktype="Item" ordertype="down">
                            </button>
                        </div>
                        <div class="col2">
                            <div class="list">
                                <ul id="drop-item">
                                </ul>
                            </div>
                        </div>
                        <div class="col3">
                            <div>
                                <input placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"
                                    name="itemName" inputblock="item" id="txt-item-name" type="text" value="" />
                            </div>
                            <div>
                                <span class="acc-label">Description</span>
                            </div>
                            <div>
                                <textarea id="txt-item-desc" inputblock="item" name="itemDesc"></textarea>
                            </div>
                            <div>
                                <span title="Active menu items are displayed on the iMyTable application for customers to view.
To hide a menu item from customers on the iMyTable application, deactivate the menu item." class="acc-label">Active</span>
                                <input type="checkbox" id="item-active" name="itemActive" value="true" />
                            </div>
                            <div>
                                <span class="acc-label">Vegetarian</span>
                                <input type="checkbox" id="chkItem-veg" name="itemIsVeg" value="true" />
                            </div>
                            <div>
                                <span class="acc-label">Glutton Free</span>
                                <input type="checkbox" id="chkItem-gf" name="itemIsGF" value="true" />
                            </div>
                        </div>
                        <div class="col4">
                            <div class="preview-image">
                                <div class="image-button search-for-image">
                                    <input type="file" name="itemImage" for="item-preview-image" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-item-del-img">
                                    </button>
                                    <div class="client-preview-area" id="item-preview-image">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="item-image-display" name="itemDisplayImage" value="true" />
                                </div>
                            </div>
                            <div class="preview-icon" style="display: none;">
                                <div class="image-button search-for-icon">
                                    <input type="file" name="itemIcon" for="item-preview-icon" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-item-delicon">
                                    </button>
                                    <div class="client-preview-area" id="item-preview-icon">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="item-display-icon" name="itemDisplayIcon" value="true" />
                                </div>
                            </div>
                            <div>
                                <select id="item-select-imageicon">
                                    <option value="image">Image</option>
                                    <option value="icon">Icon</option>
                                </select>
                            </div>
                            <div>
                                <span class="acc-label">Spice level</span>
                            </div>
                            <div>
                                <select id="item-spice-level" name="itemSpiceLevel">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                            <div>
                                <span class="acc-label">Price</span>
                            </div>
                            <div class="clearfix">
                                <div class="price-div">
                                    <input type="text" id="txt-item-price" name="itemPrice" />
                                </div>
                                <div title="Cost of the menu item." class="currency-unit">
                                    USD
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!-- item-end -->
                <!-- group-begin -->
                <div class="accordion">
                    <div class="acc-header">
                        <div class="acc-header-content clearfix">
                            <div class="accordion-name">
                                <span>Group</span>
                            </div>
                            <div class="buttons">
                                <button title="Start a new group" type="button" class="image-button add-icon" id="btn-group-add">
                                </button>
                                <button disabled="disable" title="Add this group to the preview" type="button" class="image-button sav-icon"
                                    id="btn-group-update">
                                </button>
                                <button disabled="disable" title="Delete the selected group" type="button" class="image-button del-icon"
                                    id="btn-group-del">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="acc-body clearfix">
                        <form action="/Menu/AddGroup" method="post" enctype="multipart/form-data" id="group-form">
                        <input type="hidden" class="flag" id="group-flag" value="add" />
                        <input type="hidden" name="LangID" id="txt-group-langid" value="" />
                        <input type="hidden" name="PriLanguageID" id="txt-group-prilangid" value="" />
                        <input type="hidden" name="ItemID" id="txt-group-itemid" value="" />
                        <input type="hidden" name="GroupID" id="txt-group-groupid" value="" />
                        <input type="hidden" name="IsAutoTrans" id="txt-group-autotrans" value="" />
                        <input type="hidden" name="XMLNameDesc" id="txt-group-xml" value="" />
                        <input type="hidden" name="Contents" id="group-contents" value="" />
                        <input type="hidden" name="ImageID" id="group-imageid" value="" />
                        <div class="col1">
                            <button type="button" class="image-button order-move-up" blocktype="Group" ordertype="up">
                            </button>
                            <button type="button" class="image-button order-move-down" blocktype="Group" ordertype="down">
                            </button>
                        </div>
                        <div class="col2">
                            <div class="list">
                                <ul id="drop-group">
                                </ul>
                            </div>
                        </div>
                        <div class="col3">
                            <div>
                                <input placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"
                                    type="text" name="groupName" inputblock="group" id="txt-group-name" value="" />
                            </div>
                            <div>
                                <span class="acc-label">Description</span>
                            </div>
                            <div>
                                <textarea id="txt-group-desc" inputblock="group" name="groupDesc"></textarea>
                            </div>
                            <div>
                                <span title="Active groups are displayed on the iMyTable application for customers to view.
To hide a group from customers on the iMyTable application, deactivate the group." class="acc-label">Active</span>
                                <input type="checkbox" id="group-active" name="groupActive" value="true" />
                            </div>
                            <div>
                                <span class="acc-label">Vegetarian</span>
                                <input type="checkbox" id="chkGroup-veg" name="groupIsVeg" value="true" />
                            </div>
                            <div>
                                <span class="acc-label">Glutton Free</span>
                                <input type="checkbox" id="chkGroup-gf" name="groupIsGF" value="true" />
                            </div>
                            <div>
                                <span class="small acc-label">Type</span>
                                @Html.DropDownListFor(x => x.GroupTypeID, Model.grouptypes, new { @class = "small-droplist" })
                            </div>
                            <div>
                                <span class="small acc-label">Limit</span>
                                <input type="text" class="small-textbox" id="group-limit" name="groupLimit" />
                            </div>
                        </div>
                        <div class="col4">
                            <div class="preview-icon">
                                <div class="image-button search-for-icon">
                                    <input type="file" for="group-preview-icon" name="groupIcon" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-group-delicon">
                                    </button>
                                    <div class="client-preview-area" id="group-preview-icon">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="group-display-icon" name="groupDisplayIcon" value="true" />
                                </div>
                            </div>
                            <div>
                                <span class="acc-label">Spice level</span>
                            </div>
                            <div>
                                <select id="group-spice-level" name="groupSpiceLevel">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                            <div>
                                <span class="acc-label">Price</span>
                            </div>
                            <div class="clearfix">
                                <div class="price-div">
                                    <input type="text" name="groupPrice" id="txt-group-price" />
                                </div>
                                <div title="Cost of the group." class="currency-unit">
                                    USD
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!-- group-end -->
                <!-- option-begin -->
                <div class="accordion">
                    <div class="acc-header">
                        <div class="acc-header-content clearfix">
                            <div class="accordion-name">
                                <span>Option</span>
                            </div>
                            <div class="buttons">
                                <button title="Start a new option" type="button" class="image-button add-icon" id="btn-option-add">
                                </button>
                                <button disabled="disable" title="Add this option to the preview" type="button" class="image-button sav-icon"
                                    id="btn-option-update">
                                </button>
                                <button disabled="disable" title="Delete the selected option" type="button" class="image-button del-icon"
                                    id="btn-option-del">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="acc-body clearfix">
                        <form action="/Menu/AddOption" method="post" enctype="multipart/form-data" id="option-form">
                        <input type="hidden" class="flag" id="option-flag" value="add" />
                        <input type="hidden" name="LangID" id="txt-option-langid" value="" />
                        <input type="hidden" name="PriLanguageID" id="txt-option-prilangid" value="" />
                        <input type="hidden" name="OptionID" id="txt-option-optionid" value="" />
                        <input type="hidden" name="GroupID" id="txt-option-groupid" value="" />
                        <input type="hidden" name="IsAutoTrans" id="txt-option-autotrans" value="" />
                        <input type="hidden" name="XMLNameDesc" id="txt-option-xml" value="" />
                        <input type="hidden" name="Contents" id="option-contents" value="" />
                        <input type="hidden" name="ImageID" id="option-imageid" value="" />
                        <div class="col1">
                            <button type="button" class="image-button order-move-up" blocktype="Option" ordertype="up">
                            </button>
                            <button type="button" class="image-button order-move-down" blocktype="Option" ordertype="down">
                            </button>
                        </div>
                        <div class="col2">
                            <div class="list">
                                <ul id="drop-option">
                                </ul>
                            </div>
                        </div>
                        <div class="col3">
                            <div>
                                <input placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"
                                    name="optionName" inputblock="option" id="txt-option-name" type="text" value="" />
                            </div>
                            <div>
                                <span class="acc-label">Description</span>
                            </div>
                            <div>
                                <textarea id="txt-option-desc" inputblock="option" name="optionDesc"></textarea>
                            </div>
                            <div>
                                <span title="Active options are displayed on the iMyTable application for customers to view.
To hide a option from customers on the iMyTable application, deactivate the option." class="acc-label">Active</span>
                                <input type="checkbox" id="option-active" name="optionActive" value="true" />
                            </div>
                            <div>
                                <span class="acc-label">Vegetarian</span>
                                <input type="checkbox" id="chkOption-veg" name="optionIsVeg" value="true" />
                            </div>
                            <div>
                                <span class="acc-label">Glutton Free</span>
                                <input type="checkbox" id="chkOption-gf" name="optionIsGF" value="true" />
                            </div>
                        </div>
                        <div class="col4">
                            <div class="preview-icon">
                                <div class="image-button search-for-icon">
                                    <input type="file" name="optionIcon" for="option-preview-icon" class="menu-input-file" />
                                </div>
                                <div class="preview-div clearfix">
                                    <button type="button" class="image-button del-img-button" id="btn-option-delicon">
                                    </button>
                                    <div class="client-preview-area" id="option-preview-icon">
                                    </div>
                                </div>
                                <div>
                                    <span class="acc-label">Display</span>
                                    <input type="checkbox" id="option-display-icon" name="optionDisplayIcon" value="true" />
                                </div>
                            </div>
                            <div>
                                <span class="acc-label">Spice level</span>
                            </div>
                            <div>
                                <select id="option-spice-level" name="optionSpiceLevel">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                            <div>
                                <span class="acc-label">Price</span>
                            </div>
                            <div class="clearfix">
                                <div class="price-div">
                                    <input type="text" name="optionPrice" id="txt-option-price" />
                                </div>
                                <div title="Cost of the option." class="currency-unit">
                                    USD
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!-- option-end -->
            </div>
        </div>
        <div id="preview-panel">
            <div class="header">
                <div class="title">
                    <span>Preview</span>
                    <div class="preview-show-hide-lang-desc">
                        <input type="checkbox" id="showSecondLang" checked="checked" value="true" /><span>Show
                            Secondary Language</span>
                        <input type="checkbox" id="showDescription" checked="checked" value="true" /><span>Show
                            Description</span>
                    </div>
                </div>
            </div>
            <div class="body">
                <xml-containment />
            </div>
        </div>
    </div>
    <div class="btn-back-footer">
        <button id="btn-backbutton" type="button" class="left image-button button-back">
        </button>
        <button id="btn-mapping" style="margin-top: 10px; margin-right: -2px; width: 118px;"
            type="button" class="right image-button button-mapping">
        </button>
    </div>
    <form method="post" id="form-menu-mapping" action="/Location/EditBusinessHours">
    @*$("input#flow-mode").attr("value", "7");*@
    <input type="hidden" name="Mode" id="flow-mode" value="7" />
    </form>
</div>
